<template>
  <div>
    {{ title }}
    <div>
      <span>日期选择方式：</span>
      <label for="series">
        <input type="radio" name="model" value="series" id="series" @change="changeModel">
        series
      </label>
      <label for="single">
        <input type="radio" name="model" value="single" checked id="single" @change="changeModel">
        single
      </label>
      <label for="multiple">
        <input type="radio" name="model" value="multiple" id="multiple" @change="changeModel">
        multiple
      </label>
    </div>
    <div>
      <span>假期类型：</span>
      <label for="1">
        <input type="radio" name="holiday" value="月假" id="1" @change="changeHoliday">
        月假
      </label>
      <label for="2">
        <input type="radio" name="holiday" value="年假" id="2" @change="changeHoliday">
        年假
      </label>
      <label for="3">
        <input type="radio" name="holiday" value="陪同" id="3" @change="changeHoliday">
        陪同
      </label>
    </div>
    <div>
      <span>时间范围：</span>
      <label for="4">
        <input type="radio" name="time" value="上" id="4" @change="changeTime">
        上午
      </label>
      <label for="5">
        <input type="radio" name="time" value="下" id="5" @change="changeTime">
        下午
      </label>
      <label for="6">
        <input type="radio" name="time" value="全" id="6" @change="changeTime">
        全天
      </label>
    </div>
    <div>
      <span>设置开始和结束同一天：</span>
      <label for="7">
        <input type="radio" name="startEnd" value="始/终" checked id="7" @change="changeStartEnd">
        始/终
      </label>
      <label for="8">
        <input type="radio" name="startEnd" value="开/结" id="8" @change="changeStartEnd">
        开/结
      </label>
    </div>
    <button @click="nextFn">下一月</button>
    <button @click="prevFn">上一月</button>
    <button @click="toTargetDateFn">去三月</button>
    <button @click="getAllDate">获取所有选中日期</button>
    <button @click="clearDate">清空选中日期</button>
    <button @click="clearTargetDate">清空'2022-12-09'日期</button>
    <button @click="clearTargetSeriesDate">清空'2022-12-05至2022-12-08'日期</button>
    <button @click="setCheckedDatesFn">手动设置选中一个日期</button>
    <button @click="setCheckedDatesMoreFn">手动设置选中多个日期</button>
    <button @click="setCheckedDatesTipFn">手动设置选中日期并添加提示文字</button>
    <button @click="setCheckedDatesMoreTipFn">手动设置选中多个日期并添加提示文字</button>
    <datePicker
      ref="calendar"
      :isShowTitle="true"
      :readOnly="false"
      :calendarMode="calendarMode"
      :selectMode="selectMode"
      :leftCornerText="leftCornerText"
      :rightCornerText="rightCornerText"
      :startEndCornerText="startEndCornerText"
      :initMonth="initMonth"
      :lunarHolidays="lunarHolidays"
      :gregorianHolidays="gregorianHolidays"
      :pickerOptions="options"
      :defaultSingleCheckedDates="defaultSingleCheckedDates"
      :defaultSeriesCheckedDates="defaultSeriesCheckedDates"
      @singleSelect="singleSelectFn"
      @seriesSelect="seriesSelectFn"
      @singleDelete="singleDeleteFn"
      @seriesDelete="seriesDeleteFn"
    />
  </div>
</template>

<script setup lang="ts">
import moment from "moment"
import { ref, reactive } from "vue";
const title = ref("日历面板");
const calendar = ref();
const selectMode = ref();
const calendarMode = ref("Monday");
const leftCornerText = ref()
const rightCornerText = ref()
const startEndCornerText = ref()
const initMonth = ref()
const lunarHolidays=ref({'1108': '测试节日'})
const gregorianHolidays=ref({'1109': '开发节日', '0101': '元旦节'})
const defaultSingleCheckedDates = ref([{
    day: '2022-12-04', 
    bottomCornerText: "",
    leftCornerText: "年假",
    rightCornerText: "下",
  },{
    day: '2022-12-30', 
    bottomCornerText: "",
    leftCornerText: "月假",
    rightCornerText: "上",
    disabled: true,
  },{
    day: '2022-12-29', 
    bottomCornerText: "",
    leftCornerText: "陪同",
    rightCornerText: "下",
  }])
const defaultSeriesCheckedDates = ref([[{
    day: '2022-12-27', 
    bottomCornerText: "",
    leftCornerText: "年假",
    rightCornerText: "下",
  },{
    day: '2022-12-24', 
    bottomCornerText: "",
    leftCornerText: "月假",
    rightCornerText: "上",
    disabled: true,
  },{
    day: '2022-12-28', 
    bottomCornerText: "",
    leftCornerText: "陪同",
    rightCornerText: "下",
  },{
    day: '2022-12-22', 
    bottomCornerText: "",
    leftCornerText: "陪同",
    rightCornerText: "下",
  }],[{
    day: '2022-12-21', 
    bottomCornerText: "",
    leftCornerText: "年假",
    rightCornerText: "下",
  }],[{
    day: '2022-03-09', 
    bottomCornerText: "",
    leftCornerText: "月假",
    rightCornerText: "全",
  },{
    day: '2022-03-10', 
    bottomCornerText: "",
    leftCornerText: "年假",
    rightCornerText: "下",
  }]])



const options = reactive({
  disabledDate: (date: any) => {
    return moment(date.day).isAfter(new Date())
  },
  cellClassName: (date: any) => {
    if(date.day === '2022-12-21'){
      return 'cellClassName'
    }else{
      return ''
    }
  },
})

const changeModel = (value : any) => {
  console.log(value.target.value)
  selectMode.value = value.target.value
}

const changeHoliday = (value : any) => {
  console.log(value.target.value)
  leftCornerText.value = value.target.value
}

const changeTime = (value : any) => {
  console.log(value.target.value)
  rightCornerText.value = value.target.value
}

const changeStartEnd = (value : any) => {
  console.log(value.target.value)
  startEndCornerText.value = value.target.value
}

const singleSelectFn = (date: any, dateList: any) => {
  console.log(date)
  console.log(dateList)
}

const seriesSelectFn = (date: any, dateList: any) => {
  console.log(date)
  console.log(dateList)
}

const singleDeleteFn = (date: any) => {
  console.log(date)
}

const seriesDeleteFn = (date: any, dateList: any) => {
  console.log(date)
  console.log(dateList)
}

const nextFn = () => {
  calendar.value.nextMonth()
}

const prevFn = () => {
  options.disabledDate = (date: any) => {
    console.log('===+++++')
    if(date.day === '2022-11-12'){
      return true
    }else{
      return false
    }
  }
  calendar.value.prevMonth()
}

const toTargetDateFn = () => {
  calendar.value.toTargetDate('2022-03')
}

const getAllDate = () => {
  const obj = calendar.value.getAllSelectedDate()
  console.log(obj)
}

const clearDate = () => {
  calendar.value.clearSelectedDate()
}

const clearTargetDate = () => {
  calendar.value.clearSelectedDate('2022-12-09')
}

const clearTargetSeriesDate = () => {
  calendar.value.clearSelectedDate(['2022-12-05', '2022-12-06', '2022-12-07', '2022-12-08'])
}

const setCheckedDatesFn = () => {
  calendar.value.setCheckedDates('2022-12-18')
}

const setCheckedDatesMoreFn = () => {
  calendar.value.setCheckedDates(['2022-12-08','2022-12-10','2022-12-09','2022-12-12'])
}

const setCheckedDatesTipFn = () => {
  calendar.value.setCheckedDates({
    day: '2022-12-13', 
    bottomCornerText: "",
    leftCornerText: "年假",
    rightCornerText: "下",
  })
}

const setCheckedDatesMoreTipFn = () => {
  calendar.value.setCheckedDates([{
    day: '2022-12-01', 
    bottomCornerText: "",
    leftCornerText: "年假",
    rightCornerText: "下",
  },{
    day: '2022-12-02', 
    bottomCornerText: "",
    leftCornerText: "月假",
    rightCornerText: "上",
    disabled: true,
  },{
    day: '2022-12-03', 
    bottomCornerText: "",
    leftCornerText: "陪同",
    rightCornerText: "下",
  }])
}

</script>

<style scoped lang="scss">
:deep(.cellClassName) {
  color: red;
  background-color: #fbb5b5;

  .w-date-day {
    color: red;
  }
}

</style>
